<template>
    <footer class="footer">
        <div class="content">
            <div class="content-text">
                <div class="left">
                    
                    <div class="col product">
                        <div class="title">系列产品</div>

                        <div
                            class="item"
                            v-for="(item, index) in $store.state.config.products"
                            :key="index"
                        >
                            <a :href="item.href" target="_blank">
                                {{item.title}}
                            </a>
                        </div>
                    </div>

                    <div class="col company">
                        <div class="title">公司相关</div>

                        <div
                            class="item"
                            v-for="(item, index) in $store.state.config.companyAbout"
                            :key="index"
                        >
                            <a :href="item.href" target="_blank">
                                {{item.title}}
                            </a>
                        </div>
                    </div>

                    <div class="col info">
                        <div class="title">联系我们</div>
                        <div class="item">
                            客服电话：{{$store.state.config.tel}}
                        </div>
                        <div class="item">
                            地址：{{$store.state.config.address}}
                        </div>
                    </div>

                    <div class="col tel">
                        <div class="title">举报方式</div>
                        <div class="item">
                            举报邮箱：{{$store.state.config.reportEmail}}
                        </div>
                        <div class="item">
                            不良信息举报：{{$store.state.config.reportTel}}
                        </div>
                    </div>
                </div>

                <div class="right">
                    <div class="item">
                        <img src="/images/landing/footer/zchr-gfwx.png" alt="">
                        <p>“中财惠瑞”官网</p>
                    </div>
                    
                    <div class="item">
                        <img src="/images/landing/footer/zchr-gzh.png" alt="">
                        <p>“中财惠瑞”公众号</p>
                    </div>
                </div>
                
            </div>

            <div class="bottom">
                <div class="copy-right">
                    <span class="item">
                        版权声明
                    </span>

                    <a class="item" href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">
                        {{$store.state.config.record}}
                    </a>

                    <a class="item" href="http://www.zchrkj.com/" target="_blank">
                        中财惠瑞（北京）科技发展有限公司
                    </a>

                    <cnzz></cnzz>
                </div>

            </div>
        </div>
    </footer>
</template>

<style scoped lang="scss">
	@import '@css/var.scss';

    $textColor: #949494;

	.footer{
		background:#202020;
		padding:50px 0;
		color:white;

		.content-text{
			width:1200px;
			// display: inline-block;
            display: flex;
            justify-content: space-between;
		}

		a{
			color:$textColor;
		}

		.left{
            width:800px;
			overflow: hidden;
			padding: 0 30px 50px;

			.col{
				// width: 25%;
				float: left;
				font-size: 14px;
				line-height: 2em;
                margin-right: 25px;

				.title{
					font-size:18px;
					margin-bottom: 10px;
				}

				.item{
					color: $textColor;
				}
			}
            .product{
                width: 120px;
            }
            .company{
                width: 80px;
            }
            .info ,
            .tel{
                width: 200px;

            }

		}
        .right{
            display: flex;
            justify-content: space-between;
            .item{
                width: 180px;
                height: 135px;
                margin-top: 45px;
                text-align: center;
                img{
                    width: 107px;
                    height: 110px;
                }
                color: #8a8a8a;
            }
        }

		.bottom{
			text-align: center;
			border-top: 1px solid #7d7d7d;
			padding-top: 50px;

			.copy-right{
				line-height: 1em;
				color:$textColor;

				a{
					color:$textColor;
				}

				.item{
					& + .item{
						margin-left:1em;
					}
				}

                & + .copy-right{
                    margin-top: 1em;
                }
			}
		}
	}
</style>